<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>超市收银系统</title>
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="/css/dang.css"/>
</head>
<body>
<div class="search">
    <form id="form1">
        <div class="box">
        <span class="span1">
            <input type="text" class="input" name="userName"  th:value="${empQueryInfo?.userName }">
        </span>
            <span class="span2">
            <input type="button" value="查询客户"  class="button">
        </span>
        </div>
    </form>
</div>

<table class="providerTable" cellpadding="0" cellspacing="0">
    <tr class="firstTr">
        <th width="10%" class="order" role="userName">客户姓名<span></span></th>
        <th width="20%" class="order" role="password">客户电话<span></span></th>
        <th width="20%" class="order" role="realName">客户住址<span></span></th>
        <th width="20%" class="order" role="sex">客户性别<span></span></th>

        <th width="30%">操作</th>
    </tr>

    <tr th:each="t,line : ${paConsumer.items}">
        <td><span th:text="${t.userName }"></span></td>
        <td><span th:text="${t.phone }"></span></td>
        <td><span th:text="${t.address }"></span></td>
        <td><span th:text="${t.sex == 1 ? '女' :(t.sex == 2 ? '男' :'保密') }"></span></td>
        <!--<td><span th:text="${roleList[t.roleId]}"></span></td>-->
        <td th:id="${t.id}" th:name="${t.userName}">
				<span>
					<a class="viewCon" href="javascript:void(0)" >查看
					</a>
				</span>
            <span>
					<a class="modifyCon" href="javascript:void(0)">修改
					</a>
				</span>
            <span>
					<a class="deleteCon" href="javascript:void(0)">删除
					</a>
				</span>
        </td>
    </tr>
</table>

<div class="page-bar">
    <ul class="page-num-ul clearfix">
        <li th:object="${paConsumer}">
            <span th:text="|共 *{count}  条记录|"></span>
            <span th:text="|*{curr}/*{total}|"></span>
        </li>
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">上一页</a></li>
        <li><a href="javascript:void(0)">下一页</a></li>
        <li><a href="javascript:void(0)">尾页</a></li>
        <li><span class="page-go-form">
			<label>跳转至</label>
			<input type="text" name="inputPage" id="inputPage" class="page-key"
                   th:value="${paConsumer.curr }"/>页
			<button type="button" class="page-btn">GO</button>
		</span>
        </li>
    </ul>
</div>


</body>
<script src="/js/jquery-2.2.1.min.js"></script>
<script src="/js/jump.js"></script>
<script type="text/javascript" th:inline="javascript">
    $(".button").bind("click", function() {
        location = "/con/query?"+$("#form1").serialize()
    });

    var curr = [[${paConsumer?.curr ?: 1}]];
    var total = [[${paConsumer?.total ?: 0}]];

    //判断, 是否是第一页
    if(curr == 1){
        $(".page-num-ul a:lt(2)").hide();
    }
    //判断, 是否是最后一页
    if(curr == total){
        $(".page-num-ul a:gt(1)").hide();
    }



    $(".page-num-ul a:eq(0)").bind("click", function() {
        location = "/con/query?"+"&curr=1"
    });
    $(".page-num-ul a:eq(1)").bind("click", function() {

        location = "/con/query?"+$("#form1").serialize()+"&curr=[[${paConsumer.curr-1}]]"


    });
    $(".page-num-ul li a:eq(2)").bind("click", function() {

        location = "/con/query?"+$("#form1").serialize()+"&curr=[[${paConsumer.curr+1}]]"
    });
    $(".page-num-ul a:eq(3)").bind("click", function() {
        location = "/con/query?"+$("#form1").serialize()+"&curr=[[${paConsumer.total}]]"
    });






    $(".page-go-form .page-btn").bind("click", function() {
        //获取跳转目标页码
        var target = $(".page-go-form .page-key").val();

        //判断, target的值是否符合数值格式
        if(!/^\d+$/.test(target)) {
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //判断, target是否在合理的范围内
        if(target == curr || target < 1 || target > total){
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //跳转
        location = "/con/query?"+$("#form1").serialize()+"&curr="+target
    });

//查看
    $(".viewCon").bind("click", function () {
        var id = $(this).parent().parent().attr("id");
        location = "/con/unique?"+"id="+id+"&page=conDetail"
    });
    //修改
    $(".modifyCon").bind("click", function () {
        var id = $(this).parent().parent().attr("id");
        location = "/con/unique?"+"id="+id+"&page=conUpdate"
    });
//删除
    $(".deleteCon").bind("click", function () {
        var useName = $(this).parent().parent().attr("name");
        var id = $(this).parent().parent().attr("id");
        if(!confirm("确定删除用户"+useName+"吗?")) return;
        location = "/con/remove?"+"id="+id
    });

</script>


</html>